<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">	
	<head th:replace="~{commons/public::common-public}">   <!-- 引入了所有的公用css和js等 -->
	<meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=no" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
	<meta http-equiv="X-UA-Compatible" content="IE=8" />
	<title>控制台首页</title>
</head>
	<body>
		<div id="wrapper">
			<header th:replace="~{commons/header::common-header(activeUrl='thymeleaf')}"></header>   <!-- 引入了左边的导航(类似left)和上面的头(类似top)  -->
			<div id="page-wrapper">
		       <!--  th:text 设置当前元素的文本内容，常用，优先级不高- -->
			    <p th:text="${thText}" />
			    <p th:utext="${thUText}" />
			    
			  <!--  th:value 设置当前元素的value值，常用，优先级仅比th:text高 -->
		      <input type="text" th:value="${thValue}" />
		      
		     <!-- th:each 遍历列表，常用，优先级很高，仅次于代码块的插入
		     th:each 修饰在div上，则div层重复出现，若只想p标签遍历，则修饰在p标签上 -->
		     <div th:each="str : ${thEach}">
		        <p th:text="${str}" />
		     </div>
		     
		      <!-- 只遍历li，推荐使用 -->
		     <ul> 
		        <li th:text="${str}" th:each="str:${thEach}" />
		     </ul>
		     
		   <!--  th:if 条件判断，类似的有th:switch，th:case，优先级仅次于th:each, 其中#strings是变量表达式的内置方法
		          如果 th:if 条件不成立,则这个 p 也画不出来 -->
		    <p th:text="${thIf}" th:if="${not #strings.isEmpty(thIf)}"></p>
		     
		     
		    <!-- th:object 声明变量，和*{} 一起使用 -->
		    <div th:object="${thObject}">
		        <p> <span th:text="*{id}" ></span> </p>      <!--th:text="${thObject.id}"-->
		        <p> <span th:text="*{userName}" ></span> </p><!--${thObject.userName}-->
		        <p> <span th:text="*{password}" ></span> </p><!--${thObject.password}-->
		        <p> <span th:text="*{note}" ></span> </p>    <!--${thObject.note}-->
		    </div>
		    
		   <!--  th:insert 把代码块插入当前div中，优先级最高，类似的有th:replace，th:include，~{} ：代码块表达式 
		    demo3指的是 demo3.html login-head是在demo3.html中声明的fragment -->
		    <div th:insert="~{thymeleaf-pages/demo3::login-head}"></div>
		    <div th:insert="~{thymeleaf-pages/demo3::#left}"></div>  <!-- 用id的方式引入,要这样写 -->
		    
		    <!-- 引其他片段的时候传入参数 -->
		     <div th:insert="~{thymeleaf-pages/demo3::login-left('汤姆','杰克')}"></div>
		   </div>
	</div>
  </body>
</html>